<template>
    <el-tabs type="border-card" class="edittabform">
        <el-tab-pane label="内容">
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>要素数据</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-select v-model="obj.tableData.tableId" filterable clearable placeholder="请选择数据" size="mini"
                        @change="tableSelectChange">
                        <template v-for="item in eleList">
                            <el-option v-if="item.showType == 0" :key="item.id" :label="item.name" :value="item.id" />
                        </template>
                    </el-select>
                </el-col>
            </el-row>
            <!-- <el-row type="flex" class="editformitem" v-for="(item, index) in obj.tableData.itemIds" :key="'selecty' + index">
            <el-col :span="8" class="editlabel">
                <span>选择列</span>
            </el-col>
            <el-col :span="16" class="editcontent sldyinput">
                <el-select v-model="item.id" filterable clearable placeholder="请选择数据" size="mini">
                    <el-option v-for="item in nodeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
                <i class="el-icon-error" @click="deleteDataYinfo(obj.tableData.itemIds, index)"></i>
            </el-col>
        </el-row> -->
            <!-- <div class="addybtn" @click="addTableDataYinfo(obj.tableData.itemIds)">+ 新增数据列</div> -->
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>每页数据</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <input style="width:60px;margin-right:5px;" type="number" v-model.number="obj.tableData.pageSize"
                        @change="setValueMaxInfo(50, obj.tableData, 'pageSize')" max="50">条
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>开启搜索</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.isSearch"></el-checkbox>
                    <span style="font-size:15px;margin-right:15px;">开启新增</span>
                    <el-checkbox v-model="obj.isAdd"></el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>开启操作</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.isEdit"></el-checkbox>
                    <span style="font-size:15px;margin-right:15px;">开启导出</span>
                    <el-checkbox v-model="obj.isExport"></el-checkbox>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem">
                <el-col :span="8" class="editlabel">
                    <span>表单尺寸</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-radio-group v-model="obj.size">
                        <el-radio label="large">large</el-radio>
                        <el-radio label="small">small</el-radio>
                        <el-radio label="mini">mini</el-radio>
                    </el-radio-group>
                </el-col>
            </el-row>
            <el-row type="flex" class="editformitem" align="middle">
                <el-col :span="8" class="editlabel">
                    <span>隐藏分页</span>
                </el-col>
                <el-col :span="16" class="editcontent">
                    <el-checkbox v-model="obj.tableData.isHidePage"></el-checkbox>
                </el-col>
            </el-row>
        </el-tab-pane>
        <el-tab-pane label="布局">
            <box-form :predefineColors="predefineColors" :obj="obj" :setColorChange="setColorChange"></box-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
// import {
//     Query as eleQuery,
//     GetDetail,
// } from "@/api/element";

export default {
    name: "ElementForm",
    props: {
        predefineColors: Array,
        obj: Object,
        setFontStyle: Function,
        setColorChange: Function,
        plugsDataArray: Array,
    },
    model: {
        prop: "obj",
        event: "change",
    },
    components: {
        BoxForm: () => import('../mixin/BoxForm.vue'),
    },
    data() {
        return {
            eleList: [],
            nodeList: [],
        }
    },
    mounted() {
        this.getElementList();

        this.getElemetNodeList();
    },
    methods: {
        getElementList() {
            eleQuery({ pageInfo: { pageSize: 99, page: 1, totalCount: 0 } }).then(
                (response) => {
                    this.eleList = response.data.data.data;
                    this.eleList.reverse();
                }
            );
        },
        tableSelectChange() {
            // this.obj.tableData.itemIds = [];
            // this.getElemetNodeList();
        },
        getElemetNodeList() {
            this.nodeList = [];
            if (this.obj.tableData.tableId) {
                GetDetail({ id: this.obj.tableData.tableId }).then(res => {
                    if (res.data.code == 0) {

                        this.nodeList = res.data.data.nodeList;
                        // data.forEach(e => {
                        //     e.showAttrEdit = false;
                        //     e.column = [];
                        // })
                        // this.nodeListArray = this.deepClone(data);
                    }
                })
            }
        },
        // 表格数据新增列
        addTableDataYinfo(item) {
            if (item.length >= 10) {
                this.$message.error("已达到可设置最大数据列");
                return false;
            }
            item.push({
                id: "",
                // color2: "",
                // fontSize: 16,
                // fontWeight: '',
                // fontStyle: '',
            });
        },
        deleteDataYinfo(item, index) {
            item.splice(index, 1);
        },
    }
}
</script>